<template>
    <div>
        <div style="margin-bottom: 10px;">
      <!--面包屑-->
      <a-breadcrumb>
        <a-breadcrumb-item href="">
          <a-icon type="home" />  首页
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          客户退货结算
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
        <div style="width: 400px;display: flex;justify-content: space-between">
            <a-input  placeholder="退款单流水号" v-model="queryCondition.refundOrderSeq" style="width: 150px">
            </a-input>
            <div>
                <a-select
                    show-search
                    allow-clear
                    option-filter-prop="children"
                    placeholder="付款方式"
                    style="width:150px"
                    @change="handleSelect"
                >
                    <!-- <a-select-option selected value="">
                    付款方式
                    </a-select-option> -->
                    <a-select-option value="预存款">
                    预存款
                    </a-select-option>
                    <a-select-option value="微信">
                    微信
                    </a-select-option>
                     <a-select-option value="支付宝">
                    支付宝
                    </a-select-option>
                     <a-select-option value="银行转账">
                    银行转账
                    </a-select-option>
                </a-select>
            </div>
            <!-- <a-input  placeholder="退款单状态" v-model="queryCondition.paymentTypeStr" style="width: 150px">
            </a-input> -->
            <a-button @click="onSearch" icon="search" style="width:20%;background-color:dodgerblue;color: white">
                查询
            </a-button>
            <br /><br />
        </div>
        <div>
            <a-table 
                :columns="columns" 
                :data-source="refundList"
                :loading="loading" 
                :pagination="pagination" 
                :current="pagination.current" 
                @change="tableChange"  
                bordered
            >
                <template
                        v-for="col in ['refundOrderSeq', 'clientCode', 'paymentTypeStr','refundAmount','createTimeStr','orderStatusStr']"
                        :slot="col"
                        slot-scope="text, record, index"
                >
                    <template>
                        {{ text }}
                    </template>
                </template>
                <template slot="operation" slot-scope="text, record, index">
                    <div  style="display: flex;justify-content: space-around">
                        <a-button @click="showModal(record)" type="primary" style="width: 65px">
                            审核
                        </a-button>
                    </div>
                </template>
            </a-table>
            <div>
                <a-modal
                        title="审核"
                        :visible="modelVisible"
                        :dialog-style="{ top: '20px' }"
                        :width="720"
                        @cancel="modelCancel()"
                >
                <template slot="footer">
                    <a-button @click="modelCancel">取消</a-button>
                    <a-button type="primary" @click="notOk(refund.refundOrderSeq,refund.paymentTypeStr)">无法退货</a-button>
                    <a-button type="primary" @click="modelHandleOk(refund.refundOrderSeq,refund.paymentTypeStr)">退货</a-button>
                </template>
                    <a-form :form="form" layout="vertical" hide-required-mark>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="退款单流水号">
                                    <a-input v-model="refund.refundOrderSeq"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="客户编码">
                                    <a-input v-model="refund.clientCode"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="客户名字">
                                    <a-input v-model="refund.clientName"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="客户联系电话">
                                    <a-input v-model="refund.clientTel"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="客户地址">
                                    <a-input v-model="refund.clientAddress"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="退款金额">
                                    <a-input v-model="refund.refundAmount"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="原支付方式">
                                    <a-input v-model="refund.paymentTypeStr"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="创建时间">
                                    <a-input v-model="refund.createTimeStr"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-modal>
            
            </div>
        </div>
    </div>
</template>

<script>
    const columns = [
        {
            title: '退款单流水号',
            dataIndex: 'refundOrderSeq',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'refundOrderSeq' },
        },
        {
            title: '客户编码',
            dataIndex: 'clientCode',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'clientCode' },
        },
        {
            title: '原支付方式',
            dataIndex: 'paymentTypeStr',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'paymentTypeStr' },
        },
        {
            title: '退款金额',
            dataIndex: 'refundAmount',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'refundAmount' },
        },
        {
            title: '创建时间',
            dataIndex: 'createTimeStr',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'createTimeStr' },
        },
        {
            title: '退款单状态',
            dataIndex: 'orderStatusStr',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'orderStatusStr' },
        },
        {
            title: '操作',
            dataIndex: 'operation',
            align: 'center',
            scopedSlots: { customRender: 'operation' },
        },
    ];
    import * as ClientRefund from '@/services/refund/client_refund_order.js'
    export default {
        name:'clientRefund',
        data() {
            return {
                refundList:[],
                columns,
                editingKey: '',
                form: this.$form.createForm(this),
                modelVisible: false,
                loading: false,
                refund: '',
                queryCondition:{refundOrderSeq: '',paymentTypeStr: ''},
                pagination: {
                    total: 0,
                    current: 1,
                    defaultPageSize: 4,
                    showSizeChanger: true,
                    pageSizeOptions: ['5', '15', '30', '50']
                },
                
            };
        },
        methods: {
                /*
            选择查询订单状态
            */
            handleSelect(value) {
            this.queryCondition.paymentTypeStr=value;
            },
            async onSearch() {
                this.loading = true;
                let resp = await ClientRefund.queryRefundList(this.queryCondition);
                this.refundList = resp;
                this.loading = false;
            },
            showModal(record) {
                this.modelVisible = true;
                this.refund = record;
                console.log(this.purchasePlan);

            },
             modelCancel() {
                this.modelVisible = false;
            },
            async modelHandleOk(refundOrderSeq,paymentTypeStr) {
                this.modelVisible = false;
                let resp = await ClientRefund.refundCommodity(refundOrderSeq,paymentTypeStr,"退货")
                if(resp === true){
                    this.$message.success('退货成功', 3,);
                }else {
                    this.$message.error('退货失败', 3,);
                }
                this.refundList =  await ClientRefund.getRefundList();
            },
            async notOk(refundOrderSeq,paymentTypeStr){
                this.modelVisible = false;
                let resp = await ClientRefund.refundCommodity(refundOrderSeq,paymentTypeStr,"无法退货")
                if(resp === true){
                    this.$message.success('审核成功', 3,);
                }else {
                    this.$message.error('审核失败', 3,);
                }
                 this.refundList =  await ClientRefund.getRefundList();
            },
            tableChange (e) {
                this.pagination.current = e.current;
            },
            
        },
        async created(){
            this.loading = true;
            this.refundList =  await ClientRefund.getRefundList();
            this.loading = false;
        }
    };
</script>
<style scoped>
    .editable-row-operations a {
        margin-right: 8px;
    }
</style>
